<template>
  <div class="content">
    <button @click="onBtn">switch</button>
    <!-- 可以自定义class类名  duration可以控制时间 也可以传入对象控制显示和隐藏时间 appear 是否在页面初始化显示动画-->
    <transition 
      @before-enter="EnterFrom" 
      @enter="EnterActive" 
      @after-enter="EnterTo"
      @enter-cancelled="EnterCancel"
      @before-leave="leaveFrom"
      @leave="Leave" @after-leave="LeaveTo"
      @leave-cancelled="LeaveCancel" appear
      appear-from-class="from" appear-active-class="active"
      appear-to-class="to" :duration="{ enter: 500, leave: 500 }"
      leave-active-class="animate__animated animate__bounce" 
      enter-active-class="animate__animated animate__flash"
      name="fade">
      <div v-if="bol" class="box"></div>
    </transition>
  </div>

</template>
<script setup lang='ts'>
import { ref } from 'vue';
import gsap from 'gsap'
import 'animate.css'
let bol = ref(true)
const onBtn = () => {
  bol.value = !bol.value
}
const EnterFrom = (el: Element) => {
  gsap.set(el, {
    width: 0,
    height: 0
  })
  console.log('进入之前')
}
const EnterActive = (el: Element, done: gsap.Callback) => {
  gsap.to(el, {
    width: 200,
    height: 200,
    onComplete: done
  })
  console.log('过渡曲线')
}
const EnterTo = (el: Element) => {
  console.log('过渡完成')
}

const EnterCancel = (el: Element) => {
  console.log('过渡效果被打断')
}
const leaveFrom = () => {
  console.log('离开之前')
}
const Leave = (el: Element, done: gsap.Callback) => {
  console.log('离开过渡曲线')
  gsap.to(el, {
    width: 0,
    height: 0,
    onComplete: done
  })
}
const LeaveTo = () => {
  console.log('离开完成')
}
const LeaveCancel = () => {
  console.log('离开过渡曲线打断-------')
}
</script>
<style scoped lang='less'>
.box {
  width: 200px;
  height: 200px;
  background: red;
}

.fade-enter-from {
  width: 0;
  height: 0;
}

.fade-enter-active {
  transition: all 1.5s ease;
}

.e-to {
  width: 200px;
  height: 200px;
  transform: rotate(360deg);
}

.fade-leave-from {
  width: 200px;
  height: 200px;
}

.fade-leave-active {
  transition: all 1.5s ease;


}

.l-to {
  width: 0;
  height: 0;
  transform: rotate(360deg);
}
</style>